<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>登录</title>
</head>
<body>
<form   action="/">
    <span>账号：</span><input type="text" id="username"><br>
    <span>密码：</span><input type="text" id="password"><br>
    <span>验证码：</span><input type="text" id="code"><br>
    <img src="/getImg" id="img"><br>
    <input value="登录" type="button" id="sub">
</form>

<script>
    let img = document.getElementById('img');
    let username = document.getElementById('username');
    let password = document.getElementById('password');
    let code = document.getElementById('code');
    let sub = document.getElementById('sub');
    img.onclick = function () {
        img.src = '/getImg?t=' + Math.random();
    }
    sub.onclick = function () {
        let data = {
            username: username.value,
            password: password.value,
            code: code.value
        }
        let xhr = new XMLHttpRequest();
        xhr.open('POST', '/login');
        xhr.setRequestHeader('Content-Type', 'application/json');
        xhr.send(JSON.stringify(data));
        xhr.onreadystatechange = function () {
            if (xhr.readyState === 4 && xhr.status === 200) {
                let res = JSON.parse(xhr.responseText);
                if (res.code === 200) {
                    alert('登录成功');
                    window.location.href = '/myclass.html';
                }
            }
        }
    }
</script>
</body>
</html>